<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script>
        function loadXMLDoc2() {
            var xmlhttp, allProject;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    allProject = JSON.parse(this.responseText);

                }
                for (var i = 0; i <= (allProject.limit - 1); i++) {
                    insertProject(i);
                    document.getElementById("newTitle_" + i).innerHTML = allProject.docs[i].titleName;
                    document.getElementById("newA_" + i).href = allProject.docs[i].url;
                    document.getElementById("newIntroduce_" + i).innerHTML = allProject.docs[i].intro;
                    document.getElementById("newImage_" + i).src = allProject.docs[i].icon;
                }
                // document.getElementById("newTitle").innerHTML = allProject.docs[0].titleName;


            }
            xmlhttp.open("GET", "https://www.atu360.cn/api/phone/findProjectClass?level=0&limit=10", true);
            xmlhttp.send();

        }

        function newMedia(i) {
            var newMedia = document.createElement("div")
            newMedia.id = "newMedia_" + i;
            newMedia.className = "media border-top p-3"
            newMedia.style.marginBottom = "5px";
            document.getElementById("showProject").appendChild(newMedia);
        }

        function newMediaBody(i) {
            var newMediaBody = document.createElement("div");
            newMediaBody.id = "newMediaBody_" + i;
            newMediaBody.className = "meidia-body";
            newMediaBody.style.width = "80%";
            document.getElementById("newMedia_" + i).appendChild(newMediaBody);
        }

        function newA(i) {
            var newA = document.createElement("a");
            newA.id = "newA_" + i;
            newA.href = "#";
            newA.style.color = "black";
            newA.style.textDecoration = "none";
            document.getElementById("newMediaBody_" + i).appendChild(newA);
        }

        function newTitle(i) {
            var newTitle = document.createElement("h2");
            newTitle.id = "newTitle_" + i;
            document.getElementById("newA_" + i).appendChild(newTitle);
        }

        function newIntroduce(i) {
            var newIntroduce = document.createElement("p");
            newIntroduce.id = "newIntroduce_" + i;
            document.getElementById("newMediaBody_" + i).appendChild(newIntroduce);
        }

        function newImage(i) {
            var newImage = document.createElement("img");
            newImage.id = "newImage_" + i;
            newImage.href = "#";
            newImage.alt = "Block Graph";
            newImage.className = "ml-3 mt-3";
            newImage.style.width = "200px";
            document.getElementById("newMedia_" + i).appendChild(newImage)
        }

        function insertProject(i) {
            newMedia(i);
            newMediaBody(i);
            newA(i);
            newTitle(i);
            newIntroduce(i)
            newImage(i);
        }

        function newLabelContainer(i) {
            var newLabelContainer = document.createElement("div");
            newLabelContainer.id = "newLabelContainer_" + i;
            document.getElementById("hotLabel").appendChild(newLabelContainer);
        }
        function newLabel(i){
            var newLabel =document.createElement("a");
            newLabel.id = "newLabel_" + i;
            newLabel.className = "btn border rounded";
            newLabel.target = "_blank";
            newLabel.href = "#";
            newLabel.color = "black";
            newLabel.style.backgroundColor = "darkgray";
            newLabel.style.marginRight = "10px";
            document.getElementById("newLabelContainer_" + i).appendChild(newLabel);
        }
    </script>
</head>

<body>
    <div id="showProject">
        <h2>使用 AJAX 修改该文本内容</h2>
    </div>
    <div id="ADUrlFirst">
        <h2>sd </h2>
    </div>
    <button type="button" onclick="insertProject(1)">修改内容</button>
    <button type="button" onclick="loadXMLDoc2()">修改内容</button>

</body>

</html>